<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #con{ display: block; margin: 50px auto 0; text-align: center; width: 800px;}
        #inputG{ width:100%;}
        #big,#small{ width: 50%; float: left;}
        #bigimg,#smallimg{ width:400px; height: 400px;}
    </style>
</head>
<script>
window.onload =function(){
    var bigImg = document.getElementById("bigimg");
    var smallImg = document.getElementById("smallimg");
    var arrbigImg = ["1.jpg","2.jpg","3.jpg","4.jpg"];
    var arrsmallImg = ["pic1.jpg","pic2.jpg","pic3.jpg"];
    var aP = document.getElementsByTagName("p");
    var aH4 =document.getElementsByTagName("h4");
    var oPrev = document.getElementById("prev");
    var oNext = document.getElementById("next");
    var num1 =0;
    var num2 =0
    //上一组的事件
    oPrev.onclick=function(){
        bigPrev();
        big();
        smallPrev();
        small();
    }
    //下一组的事件
    oNext.onclick =function(){
        bigNext();  
        big();
        smallNext();
        small();
    }

        bigImg.onclick=function(){        
            bigNext();  
            big();
        }
        function bigPrev(){
                num1--;
                if(num1==-1){
                    num1=arrbigImg.length-1;
                }
           }
        function bigNext(){
                num1++;
                if(num1==arrbigImg.length){
                    num1=0;
                }
           }
        function big(){
                bigImg.src=arrbigImg[num1];
                aP[0].innerHTML=(num1+1)+"/"+arrbigImg.length;
                aH4[0].innerHTML="第一组第"+(num1+1)+"张";
            }
        function smallPrev(){
                num2--;
                if(num2==-1){
                    num2=arrsmallImg.length-1;
                }
           }
        function smallNext(){
                num2++;
                if(num2==arrsmallImg.length){
                    num2=0;
                }
            }
    
        function small(){
            
                smallImg.src=arrsmallImg[num2];
                aP[1].innerHTML=(num2+1)+"/"+arrsmallImg.length;
                aH4[1].innerHTML="第二组第"+(num2+1)+"张";
        }
    
        smallImg.onclick=function(){
            smallNext();
            small();
        }
    
}    
</script>
<body>
  <span id="con">
      
   <div id="inputG">
    <input type="button" value="上一组" id="prev">
    <input type="button" value="下一组" id="next">
       
   </div>
    <div id="big">
        <img src="1.jpg" id="bigimg">
        <p>1/4</p>
        <h4>第一组第1张</h4>
    </div>
    <div id="small">
        <img src="pic1.jpg" id="smallimg">
        <p>1/3</p>
        <h4>第二组第1张</h4>  
    </div>
  </span>
</body>
</html>